<!-- 父组件示例，展示全局组件和局部组件的使用方式 -->
<script setup>
// 导入局部组件 LocalComponent
// 局部组件需要显式导入才能在当前组件中使用
import LocalComponent from "./LocalComponent.vue";

// 注意：GlobalComponents 是全局注册的组件
// 全局组件在 main.js 中通过 app.component() 注册后，无需在每个组件中导入即可直接使用
</script>

<template>
    <!-- 父组件标题 -->
    <h5>父组件</h5>

    <!-- 容器盒子，使用 flex 布局排列内部组件 -->
    <div class="box">
        <!-- 使用全局组件 GlobalComponents -->
        <!-- 全局组件无需在当前组件中导入，可直接使用 -->
        <GlobalComponents/>

        <!-- 使用局部组件 LocalComponent -->
        <!-- 局部组件必须先导入才能使用 -->
        <LocalComponent/>
    </div>
</template>

<style scoped>
/* 为容器添加 flex 布局，使内部组件横向排列 */
.box {
    display: flex;
    /* 可根据需要添加间距、对齐方式等样式 */
    /* 例如：gap: 20px; 增加组件之间的间距 */
}
:deep(.title){
    border: 2px dotted red;
}
</style>